<template>
  <div id="paicharts"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PAicharts",
  data() {
    return {
      chart: null,
      options: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initcharts();
    });
  },
  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("paicharts"));
      this.options = {
        color: [
          "#3DFFDC",
          "#F4DF58",
          "#333FFF",
          "#FFB0E3",
          "#00FFA6",
          "#7A79FF",
          "#5A3FFF",
          "#268AFF",
          "#1ED6FF",
          "#ADE1FF",
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 15,
          //   bottom: "center",
          right: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.60)",
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "90%",
            center: [120, 100],
            // labelLine: {
            //   show: false,
            // },
        //     label: {
        //       show: false,
        //       position: "center",
        //     }, 
        //     labelLine: {
        //   length: 30,
        //   length2:120,
        // },
        labelLayout: {
          verticalAlign: "bottom",
          dy: -10,
        },
            itemStyle: {
              borderColor: "#000",
              borderWidth: 2,
            },
            data: [
              { name: "埠头镇", value: "16" },
              { name: "大战乡", value: "26" },
              { name: "安岭乡", value: "56" },
              { name: "官路镇", value: "16" },
              { name: "广度乡", value: "26" },
              { name: "朱溪镇", value: "36" },
              { name: "横溪镇", value: "26" },
              { name: "步路乡", value: "36" },
              { name: "溪港乡", value: "26" },
              { name: "田市镇", value: "36" },
              { name: "白塔镇", value: "56" },
              { name: "皤滩乡", value: "46" },
              { name: "淡竹乡", value: "16" },
              { name: "湫山乡", value: "56" },
              { name: "上张乡", value: "16" },
              { name: "下各镇", value: "16" },
              { name: "双庙乡", value: "26" },
              { name: "南峰街道", value: "26" },
              { name: "安洲街道", value: "36" },
              { name: "福应街道", value: "36" },
            ],
          },
        ],
      };
      this.chart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
#paicharts {
  height: 200px;
  width: 640px;
}
</style> 